<template>
   <div class="btns">
    <button v-has-show="'shop:create'">创建</button>
    <button v-has-show="'shop:edit'">编辑</button>
    <button v-has-show="'shop:delete'">删除</button>
   </div>
</template>

<script setup lang='ts'>
import {ref ,reactive} from 'vue'
import type {Directive} from 'vue'


//permission
localStorage.setItem('userId','inzv')
//mock后台返回数据
const permission = [
  'inzv:shop:edit',
  'inzv:shop:create',
  'inzv:shop:delete',
]
const userId = localStorage.getItem('userId') as string
const vHasShow:Directive = (el,bingding )=>{
  console.log(el,bingding);
  if(!permission.includes(userId+':'+bingding.value)){
    el.style.display = 'none'
  }
  
}
</script>

<style lang="less" scoped>
.btns{
  button{
    margin: 10px;

  }
}
</style>